<template>
    <van-action-sheet v-model:show="visible" cancel-text="取消" close-on-click-action @cancel="onCancel" teleport="body">

        <!-- 修改密码 -->
        <van-collapse v-model="activeNames">
            <van-collapse-item title="修改密码" name="1">
                <van-form @submit="onSubmit" ref="formRef">
                    <van-cell-group inset>
                        <van-field v-model="password" type="number" :min="6" label="请输入新密码" placeholder="请输入新密码名"
                            :rules="[{ required: true, message: '请输入新密码', validator: validatorMessage }]"
                            label-width="120px" clearable />

                        <van-field v-model="newPassword" label="请再次输入新密码" placeholder="请再次输入新密码"
                            :rules="[{ required: true, message: '请再次输入新密码' }]" label-width="120px" clearable />
                    </van-cell-group>
                    <div style="display: flex;
                   ">
                        <van-button type="danger" round native-type="submit" color="#bf1920"
                            style="margin-left: auto;height: 25px;">确认</van-button>
                    </div>
                </van-form>
            </van-collapse-item>
        </van-collapse>


        <!-- 通知方法设定 -->
        <van-collapse v-model="noticeNames" style="margin-top: 20px;">
            <van-collapse-item title="通知方法设定" name="1">
                <van-checkbox-group v-model="checked" style="display: flex;">
                    <van-checkbox v-for="item in checkboxList" :key="item.name" :name="item.name">{{
                        item.name }}</van-checkbox>
                </van-checkbox-group>
                <div style="display: flex;">
                    <van-button type="danger" round color="#bf1920" style="margin-left: auto;height: 25px;"
                        @click="noticeSubmit">确认</van-button>
                </div>
            </van-collapse-item>
        </van-collapse>

    </van-action-sheet>
</template>

<script setup lang="ts">
import { useUserStore } from '@/stores/user'
import { changePassword, getNotification, notificationSubmit } from '@/api/worksheets';

const validatorMessage = (val) => {
    if (val.length < 6) {
        return '密码长度不能小于6位'
    } else if (val.length > 20) {
        return '密码长度不能大于20位'

    }
};

const visible = defineModel<boolean>('modelValue')

const store = useUserStore()

const formRef = ref()

const password = ref('')

const newPassword = ref('')

const activeNames = ref(['1']);

const noticeNames = ref(['1'])

const checked = ref([]);

//多选数据
const checkboxList = ref([
    {
        name: 'email',
        value: true
    }
])

// 修改密码确认
const onSubmit = async () => {
    if (password.value !== newPassword.value) {
        showFailToast('两次输入的密码不一致');
        return
    }

    try {
        const res = await changePassword({
            username: store.AppState.userName,
            new_password: password.value
        })

        if (res.statusCode === 200) {
            visible.value = false

            showSuccessToast('密码修改成功')
        }
    } catch (error) {
        //
    }
}

//取消
const onCancel = () => {
    visible.value = false

    formRef.value.resetValidation()

    password.value = ''

    newPassword.value = ''
}

//多选回显
const checkBoxEcho = async () => {
    try {
        const res: any = await getNotification()

        checked.value = res.notify_options.map((item: any) => item.name)

    } catch (error) {
        //
    }
}

//通知方法设定确认
const noticeSubmit = async () => {
    try {

        const res: any = await notificationSubmit({ notify_options: checkboxList.value })
        if (res.statusCode === 200) {
            visible.value = false

            showSuccessToast('操作成功')
        }
    } catch (error) {
        //
    }
}


watch(() => visible.value, (val) => {
    if (val) {
        checkBoxEcho()
    }
})


</script>

<style lang="scss" scoped>
:deep(.van-cell__title) {
    font-weight: 600;
}

:deep(.van-cell__right-icon) {
    color: #000;
    font-weight: 600;
}

:deep(.van-field__error-message) {
    position: absolute;
    top: 20px;
}

:deep(.van-field) {
    height: 50px;
}
</style>